<template>
  <div class="app-container">
    <h2 style="text-align: center;">新增菜品</h2>

    <el-form label-width="120px">
      <el-form-item label="菜品名称">
        <el-input v-model="orderDish.dishName"/>
      </el-form-item>
      <!-- 所属分类：级联下拉列表 -->
      <el-form-item label="菜品类别">
        <!-- 一级分类:绑定change事件实现二级联动     -->
        <el-select
          @change="getsubCategoryByCategory"
          v-model="classification.category"
          placeholder="一级分类"
        >
          <el-option
            v-for="item in classification"
            :key="item.category"
            :label="item.category"
            :value="item.category"
          />
        </el-select>
        <!-- 二级分类 -->
        <el-select v-model="subclassification.subCategory" placeholder="二级分类">
          <el-option
            v-for="item in subclassification"
            :key="item.subCategory"
            :label="item.subCategory"
            :value="item.subCategory"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="菜品价格">
        <el-input v-model="orderDish.dishPrice"/>
      </el-form-item>
      <el-form-item label="预计所需时间">
        <el-input-number
          :min="0"
          v-model="orderDish.dishTime"
          controls-position="right"
          placeholder="请填写预计所需时间"
        />
      </el-form-item>
      <el-form-item label="菜品描述">
        <el-input type="textarea" :rows="5" v-model="orderDish.dishDescription"/>
      </el-form-item>
      <el-form-item label="菜品图片">
        <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8888/oss/uploadFile"
          :on-success="fileUploadSuccess"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import dish from "@/api/dish";

export default {
  data() {
    return {
      saveBtnDisabled: false, //保存按钮是否禁用
      orderDishclassification: {
        category: "",
        subCategory: ""
      },
      orderDish: {},
      //一级分类列表
      classification: [],
      //二级分类列表
      subclassification: [],
      BASE_API: process.env.BASE_API // 接口API地址
    };
  },
  mounted() {
    this.getCategory();
  },
  methods: {
    //上传图片成功后
    fileUploadSuccess(resource){
      this.orderDish.dishPicture = resource.data.url
    },
    //查询所有的一级分类信息
    getCategory() {
      dish.getCategory().then(resp => {
        this.classification = resp.data.category;
        console.log(this.classification);
      });
    },
    //根据一级名称获取二级信息
    getsubCategoryByCategory(category) {
      dish.getSubCategory(category).then(resp => {
        this.subclassification = resp.data.subCategory;
      });
    },
    next() {
      this.orderDish.dishClassification = this.classification.category;
      this.orderDish.dishSubclassification = this.subclassification.subCategory;
      console.log(this.orderDish);
      dish.createDish(this.orderDish).then(resp => {
        //提示成功
        this.$message({
          type: "success",
          message: "新增菜品成功"
        });
        this.orderDish = {};
        (this.classification = []), (this.subclassification = []);
      });
    }
  }
};
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>